<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .a{
            height: 66px;
            background: rgb(255, 255, 255);
            border-bottom: 1px solid rgb(219, 218, 218);
        }
        .b{
                width: 1207px;
                height: 512px;
                background:rgb(231, 231, 231);
                margin:25px auto;
        }
        .c{
                width: 1207px;
                height: 36px;
                background:rgb(238, 238, 238);
                margin:0px auto; 
            }
        .d{
                width: 1207px;
                height: 1000px;
                background:rgb(240, 240, 240);
                margin:25px auto 12px;
        }
        .e{
                width: 1207px;
                height: 35px;
                background:rgb(199, 198, 198);
                text-align: center;
                line-height: 35px;
                margin:12px auto 0px;
            }
            
        .a .zuo{
            float: left;
            margin-top: 26px;
            margin-left: 35px;
        }
        .a ul{
            float: left;
            margin-top: 15px;
            margin-left: 257px;
        }
        .a li {
            float: left;
            width: 40px;
            background: yellow;
            line-height: 40px;
            border-radius: 40px;   
            margin: 0 0 0 12px;
            text-align: center;
            transform: rotate(-30deg);

        }
        .a .you{
            float: right;
            margin-right: 20px;
            margin-top: 22px;
        }
        .a li{
            float: left;
        }
        .b .zuo{
            float: left;
            widows: 909px;
        }
        .b .you{
            float: right;
            width: 289px;
        }
        .b img{
            width: 910px;
        }
        .b .you li{
            width: 289px;
            height: 163px;
            margin-bottom: 12px; 
            overflow: hidden;  
            position: relative;
        }
        .b .you img{
            width: 289px;
        }
        .b .you p{
            position: absolute;
            left: 0px;
            bottom: 0px;
            background: rgb(0,0,0,0.3);
            widows: 289px;
            height: 30px;
            line-height: 30px;
        }
        .c li{
            width: 130px;
            height: 34px;
            border: 1px solid black;
            line-height: 33px;
            padding-left: 12px;
            float: left;
            margin-right: 15px;

        }
        .c select{
            width: 130px;
            height: 36px;
            border: 1px solid black;
            line-height: 33px;
            padding-left: 12px;
            float: left;
            margin-right: 15px;
        }
        .d li{
            width: 291px;
            height: 331px;
            border-bottom:1px solid rgb(0, 0, 0);
            background: rgb(255, 255, 255);
            float: left;
            margin-right: 14px;
        }
        .d img{
            width: 291px;
            height: 220px;
        }
        .d li:nth-of-type(4n){
            margin-right: 0px;
        }
        .d p{
            margin: 12px 15px;
        }
        .d p:nth-of-type(1){
            height: 42px;
        }
        .d span:nth-of-type(1){
            float: left;
        }
        .d span:nth-of-type(2){
            float: right;
            margin-left: 121px;
        }
        .d span:nth-of-type(3){
            float: right;
        }
        .f{
            width: 1212px;
            height: 275px;
            margin: 0px auto;
            background: rgb(255, 255, 255);
        }
        .f p:nth-of-type(1){
            margin-top: 71px;
            margin-left: 35px;
            color: rgb(148, 148, 148);
            height: 15px;
            
        }
        .f img{
            margin-top: 66px;
        }
        .f p:nth-of-type(3){
            margin-top: 62px;
            margin-left: 35px;
            height: 15px;
            color: rgb(150, 150, 150);
        }
        .f li{
            margin-top: 31px;
            height: 13px;
            margin-left: 13px;
            color:rgb(148, 148, 148);
            float: left;
        }
        
        .g{
            height: 32px;
            background: black;
            color: white;
        }
        .g .zuo {
            float: left;
    
        }
        .g .zuo li{
            float: left;
            margin-left: 21px;
            color: rgb(148, 148, 148);
        }
        .g .you{
            float: right;
        }
        .g .you li{
            margin-right: 6px;
            color: rgb(148, 145, 145);
            float: right;
        }
    </style>
</head>
<body>
    <div class="a">
        <span class="zuo">三</span>
        <ul>
            <li>赞</li>
            <li>萌</li>
            <li>哈</li>
            <li>艹</li>
            <li>买</li>
        </ul>
        <span class="you">登陆</span>
    </div>
    <div class="b">
        <img src="images/s003.jpg" alt="" class="zuo">
        <ul class="you">
            <li>
                <img src="images/s02.jpg" alt="">
                <p>想点亮圣诞气氛，试试这个『驯鹿灯』</p>
            </li>
            <li>
                <img src="images/s03.jpg" alt="">
                <p>Designer 100,100个设计师，100个故事</p>
            </li>
            <li>
                <img src="images/s04.jpg" alt="">
                <p>旧椅子获新生，还比以前更炫酷了</p>
            </li>
        </ul>
    </div>
    <ul class="c">
        <li>最新</li>
        <select name="" id="">
            <option value="">最热
            </option>
        </select>

        <select name="" id="">
            <option value="">热议
            </option>
        </select>

        <li>随机</li>
    </ul>
    <ul class="d">
        <li>
            <img src="images/i01.jpg" alt="">
        <p>先是一只呆萌的白色猫头鹰来袭~</p>
        <p>
            <span>2小时前</span>
            <span>2</span>
            <span>122</span>
        </p>
    </li>
        <li><img src="images/i02.jpg" alt="">
        <p>戴着帽子的海狮没想到在这里也可以看见吧~</p>
        <p>
            <span>3小时前</span>
            <span>7</span>
            <span>108</span>
        </p>
        </li>
        <li>
            <img src="images/i03.jpeg" alt="">
        <p>听说只有一只眼睛会比较酷~</p>
        <p>
            <span>16小时前</span>
            <span>11</span>
            <span>407</span>
        </p>
        </li>
        <li><img src="images/i04.jpeg" alt="">
        <p>睡前看个书让知识填充一下自己~</p>
        <p>
            <span>16小时前</span>
            <span>16</span>
            <span>640</span>
        </p>
        </li>
        <li><img src="images/i05.jpg" alt="">
        <p>秋天的落叶与我的帽子很配呢~</p>
            <p>
                <span>18小时前</span>
                <span>24</span>
                <span>534</span>
            </p>
        </li>
        <li><img src="images/i06.png" alt="">
        <p>来自川建国的蔑视，哼~</p>
            <p>
                <span>19小时前</span>
                <span>23</span>
                <span>1064</span>
            </p>
        </li>
        <li><img src="images/i07.jpg" alt="">
        <p>蜘蛛侠除了可以在墙上爬还能在香蕉上飞，没想到吧~</p>
            <p>
                <span>20小时前</span>
                <span>10</span>
                <span>402</span>
            </p>
        </li>
        <li><img src="images/i11.jpg" alt="">
        <p>连小婴儿睡觉都会数羊了12345，梦里好多羊呀~</p>
        <p>
            <span>23小时前</span>
            <span>9</span>
            <span>303</span>
        </p>
        </li>
        <li><img src="images/s001.jpg" alt="">
        <p>千万不要小瞧了一根根香蕉它们也都是会比心的~</p>
        <p>
            <span>1天前</span>
            <span>11</span>
            <span>479</span>
        </p>
        </li>
        <li><img src="images/s002.jpg" alt="">
        <p>看小香蕉给你比了一个爱心~</p>
        <p>
            <span>2天前</span>
            <span>34</span>
            <span>533</span>
        </p>
        </li>
        <li><img src="images/s003.jpg" alt="">
        <p>看小香蕉笑脸，是不是很可爱呢</p>
        <p>
            <span>2天前</span>
            <span>19</span>
            <span>463</span>
        </p>
        </li>
        <li><img src="images/s03.jpg" alt="">
        <p>这根小香蕉是不是非常有创意呢</p>
            <p>
                <span>2天前</span>
                <span>44</span>
                <span>540</span>
            </p>
        
        </li>
    </ul>
    <p class="e">太快了吧，慢慢来，笑</p>
    <div class="f">
        <p>合作伙伴</p>
        <p>
            <img src="images/.jpg" alt="">
            <img src="images/i10.png" alt="">
            <img src="images/i11.png" alt="">
            <img src="images/s001.png" alt="">
            <img src="images/s002.png" alt="">
            <img src="images/.jpg" alt="">
            <img src="images/.jpg" alt="">
        </p>
        <p>友情链接</p>
        <ul>
        <li>DRC北京工业设计创意产业基地</li>
        <li>|</li>
        <li>中国工业设计协会</li>
        <li>|</li>
        <li>设计邦</li>
        <li>|</li>
        <li>网易家居</li>
        <li>|</li>
        <li>智东西</li>
        <li>|</li>
        <li>查网空间</li>
        <li>|</li>
        <li>七牛云存储</li>
        <li>|</li>
        <li>高清图片</li>
        <li>|</li>
        <li>Fotor</li>
        </ul>
        
    </div>
    <div class="g">
        <ul class="zuo">
            <li>关于</li>
            <li>|</li>
            <li>合作</li>
            <li>|</li>
            <li>投稿</li>
            <li>|</li>
            <li>工业设计导航</li>
            <li>|</li>
            <li>站点地图</li>
            
        </ul>
        <ul class="you">
           
            <li>设计癖</li>
            <li>2016</li>
            <li>©</li>
        </ul>
    </div>

</body>
</html>